<!--
 * @Description: 
 * @Author: Pengfei Zhang
 * @Date: 2021-09-03 10:12:35
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-03 10:30:41
-->
<template>
  <view>
    <view class="form-item">
      <SearchBar />
    </view>
    <view class="form-item flex-between">
      <EventLevelBar :level="2" />
      <EventStatusBar :state="1" />
    </view>
    <view class="form-item">
      <DetailTab value="1" :list="tabList" />
    </view>
    <view class="form-item">
      <CommonTab value="1" :list="tabList" />
    </view>
    <view class="form-item">
      <button class="btn-primary-plain">按钮1</button>
      <br/>
      <button class="btn-primary">按钮2</button>
      <br/>
      <button class="btn-warn-plain">按钮3</button>
    </view>
    <view class="form-item">
      <button @click="datePickerOpen">2021-09-09 12:00:00</button>
      <DateTimePicker ref="datePicker" value="2021-09-09 12:00:00" @submit="datePickerSubmit" />
    </view>
  </view>
</template>

<script>
import EventLevelBar from '@/components/eventLevelBar';
import EventStatusBar from '@/components/eventStatusBar';
import DetailTab from '@/components/detailTab';
import SearchBar from '@/components/searchBar';
import CommonTab from '@/components/commonTab';
import DateTimePicker from '@/components/dateTimePicker';

export default {
  components: {
    EventLevelBar,
    EventStatusBar,
    DetailTab,
    SearchBar,
    CommonTab,
    DateTimePicker
  },
  data() {
    return {
      tabList: [
        { label: '基础信息', value: '1' },
        { label: '影响参数', value: '2' },
        { label: '关联任务', value: '3', badge: 4 },
      ],
    }
  },
  methods: {
    datePickerOpen() {
      this.$refs.datePicker.open();
    },
    datePickerSubmit(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item {
  margin-bottom: 40rpx;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
</style>